<template>
	<div style='background: #fff'>
		<div class='content-title'>字段管理</div>
		<div style='padding:35px 20px'>
			<button class='btn btn-hover' @click='addFields'>创建字段</button>
			<div style="padding:1px">
				<Table :columns="fieldsList" :data="fieldsData" stripe></Table>
			</div>
		</div>
		<!-- 创建字段 -->
        <Modal v-model="modal" width="600">
            <p slot="header">
                <span>{{dataId?'编辑字段':'创建字段'}}</span>
            </p>
            <div>
               <Form :label-width='80'>
                    <FormItem label='分组'>
                        <p slot='label'><span class='star'>*</span>分组</p>
                        <Select v-model='formItem.class_id'>
                            <Option v-for="item in configData.class" :value="item.id" :key="item.id">{{ item.name }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label='数据表'>
                        <p slot='label'><span class='star'>*</span>数据表</p>
                        <Select v-model='formItem.table' @on-change='selectTable'>
                            <Option v-for="item in configData.table" :value="item.Name" :key="item"></Option>
                        </Select>
                    </FormItem>
                    <FormItem label='字段'>
                        <p slot='label'><span class='star'>*</span>字段</p>
                        <!-- <Input v-model='formItem.name' placeholder='请输入字段名称'></Input> -->
                        <Select v-model='formItem.name'>
                            <Option v-for="item in fieldData" :value="item.Field" :key="item"></Option>
                        </Select>
                    </FormItem>
                    <FormItem label='值'>
                        <Input v-model='formItem.value' placeholder='请输入值，例如密钥.字段' @on-blur='valueBlur'></Input>
                        <!-- <Row>
                            <Col span='10'>
                                <Select v-model="value1">
                                    <Option value="0">不选择</Option>
                                    <Option :value="item.name" v-for='item in configData.auth' :key='item'>
                                    </Option>
                                </Select>
                            </Col>
                            <Col span='13' offset='1'>
                                <Input v-model='value2' placeholder='请输入值'></Input>
                            </Col>
                        </Row> -->
                    </FormItem>
                    <FormItem label='类型'>
                        <Select v-model='type' @on-change='selectType'>
                            <Option value="0">不选择类型</Option>
                            <Option v-for="item in configData.type" :value="item" :key="item">{{ item }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label='传值'>
                        <RadioGroup v-model="required">
                            <Radio label="1">是</Radio>
                            <Radio label="0">否</Radio>
                        </RadioGroup>
                    </FormItem>
                    <!-- <FormItem label='请求方法'>
                        <CheckboxGroup v-model="method">
                            <Checkbox label="GET"></Checkbox>
                            <Checkbox label="POST"></Checkbox>
                        </CheckboxGroup>
                    </FormItem> -->
                    <FormItem label='请求链接'>
                        <Input v-model='formItem.url' placeholder='请输入请求链接'></Input>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer">
                <button class='btn-cancel' @click="cancel">取消</button>
                <button class='btn-sure' @click="sure">确认</button>
            </div>
        </Modal>
	</div>
</template>
<script type="text/javascript">
	export default{
		data(){
			return{
				modal:false,
				fieldsList: [
                    {
                        title: '分组',
                        key: 'class_name',
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.class.name)
                            ]);
                        }
                    },
                    {
                        title: '数据表',
                        key: 'table'
                    },
                    {
                        title: '字段',
                        key: 'name'
                    },
                    {
                        title: '值',
                        key: 'value'
                    },
                    {
                        title: '类型',
                        key: 'type'
                    },
                    {
                        title: '必须',
                        key: 'required',
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.required?'是':'否')
                            ]);
                        }
                    },
                    // {
                    //     title: '请求方法',
                    //     key: 'method'
                    // },
                    {
                        title: '请求链接',
                        key: 'url'
                    },
                     {
                        title: '创建时间',
                        key: 'created_at',
                        width:160,
                        render: (h, params) => {
                            return h('div', [
                                h('span', this.format(params.row.created_at))
                            ]);
                        }
                    },
                     {
                        title: '更新时间',
                        key: 'updated_at',
                        width:160,
                        render: (h, params) => {
                            return h('div', [
                                h('span', this.format(params.row.updated_at))
                            ]);
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width:110,
                        render: (h, params) => {
                            return h('div', [
                                h('span', {
                                    style: {
                                        color:'#06A0FD',
                                        cursor:'pointer',
                                        marginRight:'8px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params.row)
                                        }
                                    }
                                }, '编辑'),
                                h('span', {
                                    style: {
                                        color:'#06A0FD',
                                        cursor:'pointer'
                                    },
                                    on: {
                                        click: () => {
                                            this.del(params.row)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                fieldsData: [],
                pagination:{},
                dataId:0,
                formItem:{
                    class_id:'',
                    table:'',
                    name:'',
                    value:0,
                    
                    url:''
                },
                type:'0',
                value1:'0',
                value2:'',
                required:'1',
                // method:[],
                configData:{},
                fieldData:[]
			}
		},
		created(){
            this.$bus.emit('updateMainMenuActive',this.$route.fullPath);
            this.getData();
            //获取配置信息
            this.fetch('/home/app/auth/info/class/field').then(res=>{
                if(res&&res.data.data&&res.data.code){
                    this.configData = res.data.data;
                }
            })
        },
        methods:{
            getData(){
                this.fetch('/home/app/auth/class/field').then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        this.fieldsData = res.data.data;
                    }
                })
            },
            //创建密钥
            addFields(){
                this.modal = true;
                this.dataId = 0;
                this.formItem.class_id='';
                this.formItem.table='';
                this.formItem.name='';
                this.formItem.value='';
                this.formItem.url='';
                this.type = '0'
                this.required = '1';
                this.value1 = '0'
                this.value2 = ''
                // this.method = []
            },
            //选择数据表
            selectTable(table){

                this.fetch('/home/app/auth/class/field/fields/'+table).then(res=>{
                    if(res&&res.data.data){
                        this.fieldData = res.data.data;
                    }
                })
            },
            selectValue(value){
                this.fetch('/home/app/auth/class/field/fields/'+value).then(res=>{
                    if(res&&res.data.data){
                        this.valueField = res.data.data;
                    }
                })
            },
            //值
            valueBlur(){
                if(this.formItem.value){
                    this.type = '0';
                }
            },
            //类型
            selectType(type){
                
                if(type!=0){
                    this.formItem.value = ''
                }
            },
            cancel(){
                this.modal = false;
            },
            sure(){
                

                if(!this.formItem.class_id){
                    this.$Message.warning('请选择分组')
                    return;
                }
                if(!this.formItem.table){
                    this.$Message.warning('请选择数据表')
                    return;
                }
                if(!this.formItem.name){
                    this.$Message.warning('请填写字段')
                    return;
                }
                // if(this.value1!=0 && !this.value2){
                //     this.$Message.warning('请填写值')
                //     return
                // }
                if(this.formItem.value && this.type != 0){
                    this.$Message.warning('值和类型只能填一个')
                    return;
                }

                // if(this.value1!=0){
                //     this.formItem.value = this.value1+'.'+this.value2
                // }else{
                //     this.formItem.value = this.value2
                // }

                let data = {
                    class_id:this.formItem.class_id,
                    table:this.formItem.table,
                    name:this.formItem.name,
                    value:this.formItem.value,
                    type:this.type== '0' ? '' :this.type,
                    required:this.required,
                    // method:this.method.join(),
                    url:this.formItem.url
                }
                if(this.dataId){
                    data.id = this.dataId;
                }
                this.fetch('/home/app/auth/add/class/field',data).then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        this.$Message.success(this.dataId?'编辑成功':'新增成功')
                        this.getData();
                        this.modal = false;
                    }
                })
            },
            edit(row){
                this.dataId = row.id;
                this.modal = true;
                this.fetch('/home/app/auth/class/field/'+row.id).then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        let data = res.data.data;
                        this.formItem = data;
                        this.required = data.required;
                        this.type = data.type ? data.type : '0';
                        this.value1 = this.formItem.value.split('.')[0];
                        this.value2 = this.formItem.value.split('.')[1];
                        // if(data.method){
                        //     this.method = data.method.split(',');
                        // }else{
                        //     this.method = []
                        // }
                        
                    }
                })
            },
            del(row){
                this.$Modal.confirm({
                    title: '提示',
                    content: '<p>确定删除吗</p>',
                    onOk: () => {
                        this.fetch('/home/app/auth/del/class/field/'+row.id).then(res=>{
                            if(res&&res.data.data&&res.data.code){
                                this.$Message.success('删除成功')
                                this.getData();
                            }
                        })
                    }
                });
                
            }
        }
	}
</script>
